<template>
	<view class="ranking">
		<view class="box">
			<view class="box_title">
				<view class="dot"></view>
				<text class="box_title_text">月收徒奖励 </text>
			</view>
			<table>
				<tr>
					<th>奖项</th>
					<th>奖励金额</th>
				</tr>
				<tr>
					<td>第一名</td>
					<td>200元</td>
				</tr>
				<tr>
					<td>第二名</td>
					<td>100元</td>
				</tr>
				<tr>
					<td>第三名</td>
					<td>50元</td>
				</tr>
				<tr>
					<td>第4-6名</td>
					<td>30元</td>
				</tr>
				<tr>
					<td>第7-9名</td>
					<td>20元</td>
				</tr>
				<tr>
					<td>第10-11名</td>
					<td>15元</td>
				</tr>
				<tr>
					<td>第12-13名</td>
					<td>10元</td>
				</tr>
				<tr>
					<td>鼓励奖(14-20名)</td>
					<td>5元</td>
				</tr>
			</table>
		</view>
		<view class="big_btn u-line-1" @click="apprentice">立即收徒，获取收徒码</view>
		<view class="box">
			<view class="box_title">
				<view class="dot"></view>
				<text class="box_title_text">排行榜 </text>
				<text class="small_text">(有效徒弟才会纳入排行，新徒弟需完成3轮任务才会成为有效徒弟)</text>
				<view class="box_title_tips">(前20名才展示完整排名数据)</view>
			</view>
			<view class="performance">
				<view class="performance_title">
					<view>我的成绩</view>
					<navigator class="performance_nav" url="/pages/withdraw/list?flag=2">月排行奖励记录</navigator>
				</view>
				<view class="performance_main">
					<view class="performance_main_item">
						<view class="top">{{info.todayInvite}}人</view>
						<view class="bottom">今日有效徒弟</view>
					</view>
					<view class="performance_main_item">
						<view class="top">{{info.currentRank || "未上榜"}}</view>
						<view class="bottom">当前名次</view>
					</view>
					<view class="performance_main_item">
						<view class="top">{{info.monthInvite}}人</view>
						<view class="bottom">当月有效徒弟</view>
					</view>
					<view class="performance_main_item">
						<view class="top">{{info.rewardAmount}}元</view>
						<view class="bottom">预计奖励</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="performance_bottom">
					<view @click="openPrentice">徒弟列表</view>
					<view @click="apprentice">我要收徒</view>
				</view>
			</view>
			<view class="performance">
				<view class="performance_title">月排行榜</view>
				<view class="line_1"></view>
				<view class="nav">
					<view>名次</view>
					<view>昵称</view>
					<view>邀请人数</view>
					<view>预计奖励</view>
				</view>
				<view class="ranking_container">
					<view class="ranking_container_item" :class="{'qian3':index < 3}" v-for="item,index in info.rankingList"
						:key="index">
						<view>{{item.rank}}</view>
						<view class="u-line-1">{{item.nickName}}</view>
						<view>{{item.inviteNum}}</view>
						<view>{{item.rewardAmount}}元</view>
					</view>
				</view>
				<view class="no_more">没有更多了</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="prentice">
				<z-paging ref="paging" :fixed="false" v-model="prenticeList" @query="queryList">
					<template #top>
						<view class="prentice_container_title">
							<view class="item1">用户名</view>
							<view class="item2">是否有效</view>
							<view class="item3">注册时间</view>
						</view>
					</template>
					<view class="scroll">
						<view class="data-list">
							<view class="prentice_container_item" v-for="(item,index) in prenticeList" :key="index">
								<view class="u-line-1 item1">{{item.userName}}</view>
								<view class="u-line-1 item2">{{item.isValidPrentice?"有":"无"}}</view>
								<view class="u-line-1 item3">{{item.registerTime}}</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</uni-popup>
	</view>
	<!-- 红包弹框组件 -->
	<redPacket/>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		GetMolnthlyRanking,
		GetPrentices
	} from "@/api/general.js"
	onLoad(() => {
		getRanking()
	})

	// 获取徒弟列表
	let prenticeList = ref([])
	let paging = ref(null)
	const queryList = async (pageIndex, pageSize) => {
		let params = {
			pageIndex,
			pageSize
		}
		let res = await GetPrentices(params)
		paging.value.complete(res.items)
	}
	let popup = ref(null)
	// 打开徒弟列表
	const openPrentice = () => {
		popup.value.open()
	}
	// 获取排行信息/个人收徒情况
	let info = ref({})
	async function getRanking() {
		let res = await GetMolnthlyRanking()
		info.value = res
	}


	const apprentice = () => {
		uni.navigateTo({
			url: '/pages/qr-code/qr-code'
		})
	}
</script>

<style lang="scss" scoped>
	.ranking {
		width: 100%;
		min-height: 100vh;
		background: #BE0610;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 100rpx;

		.big_btn {
			width: 520rpx;
			height: 72rpx;
			background-image: linear-gradient(0deg,
					#fff1ba 0%,
					#fdd26b 89%,
					#fea54e 100%),
				linear-gradient(#ffd77f,
					#ffd77f);
			background-blend-mode: normal,
				normal;
			box-shadow: inset 0px 3px 6px 0px rgba(255, 255, 255, 0.64);
			border-radius: 36rpx;
			color: #dc0918;
			text-align: center;
			line-height: 72rpx;
			margin-top: 30rpx;
			font-weight: bold;
			font-size: 30rpx;
		}

		.box {
			width: 694rpx;
			height: fit-content;
			padding: 30rpx 37rpx;
			background-color: #be0610;
			border-radius: 10rpx;
			border: solid 1px #ffea00;
			margin-top: 30rpx;
			color: #ffe49d;

			.box_title {
				.dot {
					width: 14rpx;
					height: 14rpx;
					border-radius: 50%;
					background-color: #ffe49d;
					display: inline-block;
					margin-right: 15rpx;
					margin-bottom: 4rpx;
				}

				.box_title_text {
					font-size: 36rpx;
					font-weight: bold;
				}

				.small_text {
					font-size: 30rpx;
					font-weight: bold;
				}

				.box_title_tips {
					font-size: 30rpx;
					color: #e6e2bd;
					text-align: center;
					margin-top: 36rpx;
				}
			}

			table,
			th,
			td {
				border: 1px solid #ffe49d;
			}

			table {
				width: 100%;
				border-collapse: collapse;
				margin-top: 35rpx;

				th,
				td {
					padding: 15rpx;
					width: 50%;
					text-align: center;
				}
			}

			.performance {
				width: 620rpx;
				height: fit-content;
				padding: 25rpx;
				margin-top: 30rpx;
				background-image: linear-gradient(0deg,
						#ffedb5 0%,
						#ffd67a 100%),
					linear-gradient(#ffd87d,
						#ffd87d);
				background-blend-mode: normal,
					normal;
				border-radius: 10rpx;
				color: #f1101c;

				.performance_title {
					width: 100%;
					font-size: 36rpx;
					font-weight: bold;
					letter-spacing: 2rpx;
					text-align: center;
					position: relative;
					.performance_nav {
						font-size: 22rpx;
						letter-spacing: 2rpx;
						margin-top: 10rpx;
						text-decoration: underline;
						color: #0000ff;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				
				

				.performance_main {
					width: 100%;
					height: fit-content;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					position: relative;
					margin-top: 40rpx;

					.line {
						width: 2rpx;
						height: 152rpx;
						background-color: #dc0918;
						position: absolute;
						top: 15%;
						left: 50%;
						transform: translateX(-50%);
					}

					.performance_main_item {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 40rpx;

						.top {
							font-size: 36rpx;
							font-weight: bold;
							margin-bottom: 20rpx;
						}

						.bottom {
							font-size: 28rpx;
						}
					}
				}

				.performance_bottom {
					display: flex;
					align-items: center;
					justify-content: space-evenly;

					view {
						width: 220rpx;
						height: 52rpx;
						background-color: #be0610;
						border-radius: 10rpx;
						color: #ffe8a9;
						font-size: 26rpx;
						text-align: center;
						line-height: 52rpx;
					}
				}

				.line_1 {
					width: 100%;
					height: 2rpx;
					background-color: #dc0918;
					margin-top: 15rpx;
				}

				.nav {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 20rpx 0;

					view {
						width: 25%;
						text-align: center;
						font-weight: bold;
					}
				}

				.ranking_container {
					width: 100%;
					border-top: 2rpx solid #dc0918;

					.ranking_container_item {
						padding: 10rpx 0;
						border-bottom: 2rpx solid #dc0918;
						width: 100%;
						display: flex;
						align-items: center;
						background: rgb(255, 198, 69);

						view {
							width: 25%;
							text-align: center;
						}
					}

					.qian3 {
						background: rgb(255, 172, 68);
					}
				}

				.no_more {
					text-align: center;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.prentice {
		width: 694rpx;
		height: 825rpx;
		padding: 30rpx;
		background-color: #be0610;
		border-radius: 10rpx;
		border: solid 2rpx #ffea00;
		color: #ffe49d;
		position: relative;

		.prentice_container_title {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #ffea00;
			font-weight: bold;
			font-size: 30rpx;
			background-color: #be0610;
			text-align: center;
			
			.item1 {
				width: 25%;
			}
			
			.item2 {
				width: 25%;
			}
			
			.item3 {
				width: 50%;
			}
		}

		.scroll {
			width: 630rpx;
			height: 675rpx;
			overflow: scroll;

			.prentice_container_item {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #ffea00;
				font-size: 28rpx;
				text-align: center;

				.item1 {
					width: 25%;
				}
				
				.item2 {
					width: 25%;
				}
				
				.item3 {
					width: 50%;
				}
			}
		}
	}
</style>